import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Pagination } from '../components/Pagination';
import { FilterTabs } from '../components/FilterTabs';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Kitchen() {
  usePageTitle('Kitchen Appliances');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [activeCategory, setActiveCategory] = useState('All Products');
  const categories = ['All Products', 'Refrigerators', 'Ovens', 'Dishwashers', 'Coffee Makers'];
  const allProducts = [{
    id: 'kitchen-1',
    name: 'Samsung Bespoke 4-Door Refrigerator',
    image: 'https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Refrigerators',
    description: 'Customizable panels, flexible temperature zones, and AI-powered energy management.',
    price: '$2,999'
  }, {
    id: 'kitchen-2',
    name: 'LG Smart Dishwasher with QuadWash',
    image: 'https://images.unsplash.com/photo-1584269600464-37b1b58a9fe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Dishwashers',
    description: 'Advanced cleaning technology with smart diagnostics and voice control.',
    price: '$1,199'
  }, {
    id: 'kitchen-3',
    name: 'Bosch Series 8 Smart Oven',
    image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
    category: 'Ovens',
    description: 'Precision temperature control and intuitive app for perfect results.',
    price: '$2,499'
  }, {
    id: 'kitchen-4',
    name: 'KitchenAid Stand Mixer Professional',
    image: 'https://images.unsplash.com/photo-1594282486552-05a3b6fbfdb5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80',
    category: 'Small Appliances',
    description: 'Powerful motor with multiple attachments for versatile food preparation.',
    price: '$449'
  }, {
    id: 'kitchen-5',
    name: 'Breville Oracle Touch Espresso Machine',
    image: 'https://images.unsplash.com/photo-1576092762791-dd9e2220abd1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Coffee Makers',
    description: 'Automated touch screen operation with integrated grinder and milk frother.',
    price: '$2,499'
  }, {
    id: 'kitchen-6',
    name: 'Miele Complete C3 Vacuum',
    image: 'https://images.unsplash.com/photo-1558317374-067fb5f30001?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Small Appliances',
    description: 'Powerful suction with HEPA filtration and quiet operation.',
    price: '$899'
  }, {
    id: 'kitchen-7',
    name: 'Sub-Zero Pro 48 Refrigerator',
    image: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80',
    category: 'Refrigerators',
    description: 'Professional-grade cooling with dual refrigeration systems and air purification.',
    price: '$11,999'
  }, {
    id: 'kitchen-8',
    name: 'Wolf Dual Fuel Range',
    image: 'https://images.unsplash.com/photo-1586208958839-06c17cacdf08?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Ovens',
    description: 'Gas cooktop with electric dual convection oven for precise cooking control.',
    price: '$8,499'
  }, {
    id: 'kitchen-9',
    name: 'Thermador Dishwasher Star Glow',
    image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Dishwashers',
    description: 'Ultra-quiet operation with customizable interior and WiFi connectivity.',
    price: '$2,299'
  }];
  // Filter products by category
  const filteredProducts = activeCategory === 'All Products' ? allProducts : allProducts.filter(product => product.category === activeCategory);
  // Pagination logic
  const productsPerPage = 6;
  const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
  const currentProducts = filteredProducts.slice((currentPage - 1) * productsPerPage, currentPage * productsPerPage);
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };
  const handleCategoryChange = (category: string) => {
    setActiveCategory(category);
    setCurrentPage(1);
  };
  return <div className="w-full">
      {/* Hero section */}
      <div className="relative w-full h-80 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              Kitchen Excellence
            </h1>
            <p className="text-xl text-white max-w-xl">
              Discover premium kitchen appliances that combine cutting-edge
              technology with elegant design.
            </p>
          </div>
        </div>
      </div>
      {/* Filter tabs */}
      <FilterTabs categories={categories} activeCategory={activeCategory} onCategoryChange={handleCategoryChange} />
      {/* Featured products */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">
            Featured Kitchen Appliances
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentProducts.map(product => <div key={product.id} className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <ImageWithLoader src={product.image} alt={product.name} className="w-full h-56 object-cover" />
                <div className="p-6">
                  <div className="mb-2">
                    <span className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                      {product.category}
                    </span>
                  </div>
                  <h3 className="font-bold text-xl mb-2">{product.name}</h3>
                  <p className="text-gray-600 mb-4">{product.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xl font-semibold">
                      {product.price}
                    </span>
                    <Link to={`/product/${product.id}`} className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-4 py-2 rounded-md transition-colors">
                      View Details
                    </Link>
                  </div>
                </div>
              </div>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />}
        </div>
      </section>
      {/* Why choose our kitchen appliances */}
      <section className="py-16 bg-[#e9ecef]">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-10 text-center">
            Why Choose Our Kitchen Appliances
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="w-16 h-16 mx-auto bg-[#d4a373] rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4">
                1
              </div>
              <h3 className="text-xl font-semibold mb-3">Smart Integration</h3>
              <p className="text-gray-600">
                Seamlessly connect with your existing smart home ecosystem for
                effortless control.
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 mx-auto bg-[#d4a373] rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4">
                2
              </div>
              <h3 className="text-xl font-semibold mb-3">Energy Efficiency</h3>
              <p className="text-gray-600">
                Save on utility bills with our energy-optimized appliances that
                don't compromise on performance.
              </p>
            </div>
            <div className="text-center">
              <div className="w-16 h-16 mx-auto bg-[#d4a373] rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4">
                3
              </div>
              <h3 className="text-xl font-semibold mb-3">Premium Design</h3>
              <p className="text-gray-600">
                Elevate your kitchen aesthetic with appliances that blend
                functionality with sophisticated style.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>;
}